<template>
    <div class="new-song-recommendation">
        <NewSongCard 
            coverUrl="https://picsum.photos/100/100?random=1"
            name="Biri-Biri"
            author="YOASOBI"
        />
        <NewSongCard 
            coverUrl="https://picsum.photos/100/100?random=2"
            name="消愁"
            author="毛不易"
        />
        <NewSongCard 
            coverUrl="https://picsum.photos/100/100?random=3"
            name="小红"
            author="卦者灵风"
        />
        <NewSongCard 
            coverUrl="https://picsum.photos/100/100?random=4"
            name="君曰"
            author="艾辰"
        />
        <NewSongCard 
            coverUrl="https://picsum.photos/100/100?random=5"
            name="无关宇宙"
            author="封茗囧菌"
        />
        <NewSongCard 
            coverUrl="https://picsum.photos/100/100?random=6"
            name="告白气球"
            author="周杰伦"
        />
    </div>
</template>

<script setup>
import NewSongCard from './NewSongCard.vue';
</script>

<style scoped>
.new-song-recommendation {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
</style>